<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <view class="account-form-box">
      <u--form  labelPosition="left" labelWidth="80">
        <coinselect @eventChange="coinChange" :forminfo="form" :default_id="default_id"></coinselect>
        <u-form-item label="余额">
			{{coin_info.balance_available}} {{coin_info.unit}}
        </u-form-item>
        <u-form-item label="手续费" >
          <view>{{coin_info.shouxufei_zhuanzhang}}</view>
        </u-form-item>
        <u-form-item label="对方帐户">
		  <view class="u-flex u-flex-middle">
			<view class="u-flex-8">
				<u--input v-model="obj_users_name" placeholder="对方帐号或手机号" type="text" @input="inputobj()"/>
			</view>
			<view class="u-flex-4 u-m-l-10"><u-button size="mini" @click="finduser" :type="usertipsinfo" class="u-m-l-10">{{ userTips }}</u-button></view>
		  </view>
        </u-form-item>
        <u-form-item label="转帐数量">
          <u--input
            v-model="nums"
			:border-bottom="false"
            placeholder="请输入数量"
            type="text"/>
        </u-form-item>
        <u-form-item  label="备注">
          <u--input v-model="remark" placeholder="备注" type="text" />
        </u-form-item>
      </u--form>

      <u-gap height="40"></u-gap>

      <u-button type="primary" @click="submit">确认转帐</u-button>
    </view>

    <u-gap height="40"></u-gap>
  </view>
</template>

<script>
import coinselect from "@/pages/componentsA/components/coinselect.vue";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    coinselect,
  },
  data() {
    return {
      loadstatus: false,
      loadstxt: "loadstxt",
      title: "Transfer",
      desc: "Please fill in the transaction information",
      userTips: "检查帐户",
      default_id: "1",
      usertipsinfo: "info",
      obj_users_id: "",
      remark: "",
      form: {
        errorType: ["message"],
        labelPosition: "top",
        labelwidth: "300",
      },
      coin_info: {
        balance_available: "",
        unit: "",
      },
      input: {},
      obj_users_name: "",
      nums: "",
      rules: {
        nums: [
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              if (this.nums == "") {
                callback(new Error("Please enter quantity"));
              } else {
                if (this.nums < this.coin_info.balance_available) {
                  callback();
                } else {
                  callback(new Error("Insufficient available balance"));
                }
              }
            },
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
        obj_users_name: [
          // 校验用户是否已存在
          {
            asyncValidator: (rule, value, callback) => {
              this.$api("user.ckuser", {
                ckusername: this.obj_users_name,
              }).then((res) => {
                // 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
                if (res.data.is_zai == 0) {
                  callback(new Error("用户不存在"));
                } else {
                  // 如果校验通过，也要执行callback()回调
                  callback();
                }
              });
            },
            // 如果是异步校验，无需写message属性，错误的信息通过Error抛出即可
            // message: 'xxx'
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  onLoad(option) {
    if (option.query) {
      let query = JSON.parse(option.query);
      this.default_id = query.selectcoinid;
    }
  },
  methods: {
	  inputobj(){
		  this.userTips = "检查帐户";
		  this.usertipsinfo = "info";
	  },
    finduser() {
      this.$api("user.ckuser", {
        ckusername: this.obj_users_name,
      })
        .then((res) => {
          if (res.data.is_zai == 0) {
            this.userTips = "帐号不存在";
            this.usertipsinfo = "error";
          } else {
            this.userTips = "帐号正常";
            this.usertipsinfo = "success";
          }
        })
        .catch((e) => {});
    },
    coinChange(data) {
      this.coinclass = data.value;
      this.$api("assets.coin_detail", {
        coinclass: data.value,
      })
        .then((res) => {
          console.log(res.data);
          if (res.code == 200) {
            this.coin_info = res.data;
          }
        })
        .catch((e) => {});
    },
    submit() {

          this.loadstatus = true;
          this.loadstxt = "Transfer in progress";
          return new Promise((resolve, reject) => {
            this.$api("assets.zhuan_zhang", {
              coinclass: this.coinclass,
              obj_users_name: this.obj_users_name,
              nums: this.nums,
              remark: this.remark,
            })
              .then((res) => {
                this.loadstatus = false;
                console.log("edit", res);
                if (res.code == 200) {
                  this.$router.push({
                    path: "/pages/componentsA/my/success",
                    query: {
                      title: "Transfer succeeded",
                      msg: res.msg,
                    },
                  });
                } else {
                  this.$tools.msg(res.msg);
                }
              })
              .catch((e) => {
                this.loadstatus = false;
                resolve(false);
              });
          });

    },
  },
};
</script>

<style lang="scss" scoped>
.account-form-box {
  padding: 0 20rpx;
}
</style>
